<template>
    <div id="app" class="child-view">
        <transition :name="transitionName">
            <navigation>
                <!--<keep-alive>-->
                <router-view></router-view>
                <!--</keep-alive>-->
            </navigation>
        </transition>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                transitionName: ''
            }
        },
        watch: {
            '$route': function (to, from) {
                const toLevel = to.meta.level
                const fromLevel = from.meta.level

                if (toLevel === fromLevel) {
                    this.transitionName = ''
                    return
                }

                this.transitionName = fromLevel < toLevel ? 'vux-pop-in' : 'vux-pop-out'
            },
        }
    }


</script>


<style lang="less">
    #app {
        font-family: 'Microsoft YaHei', Arial, Avenir, Helvetica, sans-serif !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .child-view {
        position: absolute;
        width: 100%;
        height: 100%;
        background: #ebebeb;
    }

    .detail-cell-box {
        .detail-box-right {
            position: absolute;
            right: 0px;
            top: -10px;
            color: white;
            line-height: 59px !important;
            text-align: center !important;
        }
        .no-select {
            color: #d1d1d1;
            background-color: inherit;
        }
        .selected {
            color: #44b549;
        }
    }

    .detail-bar {
        background: #f7f7f7;
    }

    .detail-timePick {
        color: rgb(129, 124, 124);
    }

    .weui-msg {
        .weui-btn {
            line-height: 45px;
        }
    }

    .detail-block {
        .detail-block-box {
            border-bottom: 1px solid #D9D9D9;
        }
    }

    input:disabled {
        background-color: inherit !important;
    }

    .weui-msg__desc {
        font-size: 18px !important;
    }

    .not-find {
        background: url('./assets/not-find.png') no-repeat;
        background-size: 56%;
        background-position-x: center;
    }

    .show-text {
        background-size: 50%;
        background-position: center 20px;
    }

    //页面切换动画效果
    .vux-pop-out-enter-active,
    .vux-pop-out-leave-active,
    .vux-pop-in-enter-active,
    .vux-pop-in-leave-active {
        will-change: transform;
        transition: all 250ms;
        height: 100%;
        top: 0;
        position: absolute;
        backface-visibility: hidden;
        perspective: 1000;
    }

    .vux-pop-out-enter {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    .vux-pop-out-leave-active {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    .vux-pop-in-enter {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    .vux-pop-in-leave-active {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

</style>
